<template>
  <div class="resource">
    <el-form ref="form" inline :model="formMessage">
      <el-form-item label="资源名称" prop="name">
        <el-input type="text" v-model="formMessage.name" placeholder="请输入资源名称" clearable/>
      </el-form-item>
      <el-form-item label="资源路径" prop="url">
        <el-input type="text" v-model="formMessage.url" placeholder="请输入资源路径" clearable/>
      </el-form-item>
      <el-form-item label="资源分类" prop="categoryId">
        <el-select v-model="formMessage.categoryId" placeholder="请选择资源分类" clearable>
          <el-option v-for="item in menuList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="mt20">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="name" label="资源名称"></el-table-column>
        <el-table-column prop="url" label="资源路径"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="createTime" label="添加时间">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | formatDate}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt20">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formMessage.current"
        :page-sizes="[10,20,50,100]"
        :page-size="formMessage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Form, Message } from 'element-ui'
import { getResourcePage, getAllMenus } from '@/services/boss'

@Component
export default class ResourcePage extends Vue {
  private formMessage: any = {
    name: '',
    url: '',
    categoryId: '',
    current: 1,
    size: 10
  }

  private menuList: Array<any> = []
  private tableData: Array<any> = []
  private loading = false
  private dataTotal = 0

  handleSearch () {
    this.formMessage.current = 1
    this.handleGetData()
  }

  async handleGetData () {
    const params = Object.assign({}, this.formMessage)
    this.loading = true
    try {
      const { data } = await getResourcePage(params)
      this.tableData = data.records
      this.dataTotal = data.total
    } catch (e: any) {
      Message.error(e.message)
    } finally {
      this.loading = false
    }
  }

  handleReset () {
    (this.$refs.form as Form).resetFields()
    this.handleSearch()
  }

  handleCurrentChange (current: number) {
    this.formMessage.current = current
    this.handleGetData()
  }

  handleSizeChange (size: number) {
    this.formMessage.current = 1
    this.formMessage.size = size
    this.handleGetData()
  }

  async mounted () {
    const { data } = await getAllMenus()
    this.menuList = data || []
    this.handleSearch()
  }
}
</script>

<style scoped>

</style>
